<template>
    <div id="dialog">
        <el-dialog
            :title="ruleDia.title"
            :visible.sync="ruleDia.show"
            width="60%"
            >
                <div class="form">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox :label="item.id" v-for="(item, index) in ruleData" :key="index">
                                {{ item.title }}
                            </el-checkbox>
                            
                        </el-checkbox-group>
                </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="ruleDia.show = false">取 消</el-button>
                <el-button type="primary" @click="SubForm">确 定</el-button>
            </span>
            </el-dialog>
    </div>
</template>

<script>
    export default {
        props: {
            ruleDia: Object,
            FormData: Object,
            ruleData: Array,
            ruleCheck: Array,
        },
        data() {
            return {
                checkAll: false,
                isIndeterminate: true,
                checkList: [],  
            }
        },
        computed: {
            token() {
                return localStorage.token;
            },
            
        },
        watch:{
            ruleCheck() {
                this.getNumber()
            }
        },
        created () {
            
        },
        mounted() {
            this.getNumber()
        },
        methods: {
            // 过滤字符串
            getNumber() {
                let arr = []
                if(this.ruleCheck) {
                    this.ruleCheck.forEach(el => {
                        arr.push(parseInt(el))
                    })
                    this.checkList = arr
                    console.log(this.checkList);
                }
                
                
            },
            // 获取所有菜单
            async getAllMenu() {
                let arr = []
                let res =await this.$axios.post("/admin/role/menu_module_show", { token: this.token })
                console.log(res);
                if(res.data.code == 200) {
                    arr = res.data.data
                    arr.forEach(el => {
                        this.cities.push({
                            id: el.id,
                            name: el.title
                        })
                    });
                }
                
            },
            // 提交添加或修改
            async  SubForm() {
                // console.log(this.checkList);
                
                let rules = this.checkList.join(",")
                let res = await this.$axios.post("/admin/role/rule_deploy_change", { token: this.token, rules, id: this.ruleDia.id } )
                console.log(res);
                let code = res.data.code
                if(code == 202 || code == 204) {
                    this.$message.success("更新成功")
                    this.$emit("update")
                    this.ruleDia.show = false
                } else {
                    this.$message.success("更新失败")
                    this.$emit("update")
                    this.ruleDia.show = false
                }
                
            },
            // 全选
            handleCheckAllChange(val) {
                this.checkedCities = val ? this.ruleData : [];
                this.isIndeterminate = false;
            },
            // 单选
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.cities.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            }
           
        }
    }
</script>

<style lang="scss" scoped>

</style>